import { useUserStore } from "@/stores/user"
import { getToken } from "@/utils/auth"
// 1. 导入 axios
import axios from "axios"
import { ElMessage } from "element-plus"
// 2. 设置 axios 的配置
const config = {
  // 这里是vite，会处理 /dev-api
  baseURL: import.meta.env.VITE_BASE_API,
  // 超时时间，一般10s 左右
  timeout: 3000
}
// 3. 创建 axios 的实例
const service = axios.create(config)

// 4. 设置 axios 的实例，拦截器 Token loading 状态码处理

// 4-1. 前置拦截器 处理 token 的操作 **每次请求，要携带token**；
service.interceptors.request.use(
  (config) => {
    // 4-1-1. 引入vue3.5-learn\src\utils\auth.ts， 请求前处理 token
    const token = getToken()
    if (token) {
      // 每次请求，要携带token
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (err) => {
    // 4-1-2. 发请求失败, 返回 Promise.reject(err)
    return Promise.reject(err)
  }
)
//  4-2. 后置拦截器 处理 响应，**响应必须判断 状态码，判断请求是否成功**
service.interceptors.response.use(
  (response) => {
    // 4-2-1. 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么【摘取核心数据】
    // code
    const { code, message } = response.data
    // 响应必须判断 状态码，判断请求是否成功
    if (code !== 0) {
      ElMessage.error(message)
      return Promise.reject(message)
    }
    return response.data
  },
  (err) => {
    // 4-2-2. 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么【token过期重新登陆】

    // 响应失败（失败码），走这里
    // 1. 导入 useUserStore
    const store = useUserStore()
    const res = err.response
    if (res.status === 401) {
      // 4-2-2-1.  401 错误【特殊情况：401 权限不足 或 token 过期 => 拦截到登录】
      // 4-2-2.  403 说明 登陆了，但没权限
      // 2. 使用 useUserStore 移除token
      store.logout()
      // 3. 刷新页面，页面会重新加载，会走 vue3.5-learn\src\permission.ts 的route.before 进入登录页
      window.location.reload()
    }
    //  4-2-2-2. 其他错误
    return Promise.reject(err)
  }
)
export default service
